<template>
	<div class="container">
	  <!-- 地图区域 -->
	  <div class="map">
		<map
		  class="map"
		  id="map"
		  :longitude="state.longitude"
		  :latitude="state.latitude"
		  scale="14"
		  show-location="true"
		  :markers="state.markers"
		  @markertap="mapTap"
		></map>
	  </div>
  
	  <div class="bottom">
		<!-- 底部统计信息 -->
		<div class="bottom-stats">
		  <!-- 步数统计 -->
		  <div class="steps-card">
			<div class="steps-title">今日步数</div>
			<div class="steps-count">{{ state.steps }}</div>
		  </div>
  
		  <!-- 今日轨迹 -->
		  <div class="trajectory-card">
			<div class="trajectory-title">今日轨迹</div>
			<div class="trajectory-progress">
			  <div
				class="progress-bar"
				:style="{ width: state.trajectoryProgress + '%' }"
			  ></div>
			</div>
		  </div>
  
		  <!-- 步态分析 -->
		  <div class="gait-card">
			<div class="gait-title">今日步态</div>
			<div class="gait-status">{{ state.gaitStatus }}</div>
		  </div>
		</div>
	  </div>
	</div>
  </template>
  
  <script setup>
  import { ref, onMounted, reactive } from 'vue';
  
  const state = reactive({
	longitude: 106.5467, // 初始经度（重庆）
	latitude: 29.5628, // 初始纬度（重庆）
	markers: [], // 标记点
	locations: [], // 常去地点
	steps: 0, // 今日步数
	trajectoryProgress: 0, // 今日轨迹进度
	gaitStatus: '正常', // 今日步态状态
  });
  
  // 使用百度地图API获取当前位置
  const getBaiduLocation = () => {
	// 动态加载百度地图API
	const script = document.createElement('script');
	script.src =
	  'https://api.map.baidu.com/api?v=1.0&type=webgl&ak=FLPY7qdlTRFRL45wAvfASMNuQ29CURxE';
	script.onload = () => {
	  initBaiduMap();
	};
	script.onerror = () => {
	  console.error('百度地图API加载失败，使用初始位置');
	  uni.showToast({
		title: '百度地图API加载失败',
		icon: 'none',
	  });
	};
	document.head.appendChild(script);
  };
  
  // 初始化百度地图并获取位置
  const initBaiduMap = () => {
	if (typeof BMap !== 'undefined') {
	  const geolocation = new BMap.Geolocation();
	  geolocation.getCurrentPosition(
		(position) => {
		  if (position) {
			state.longitude = position.longitude;
			state.latitude = position.latitude;
			state.markers = [
			  {
				id: 1,
				latitude: position.latitude,
				longitude: position.longitude,
				title: '当前位置',
				iconPath: '/images/marker.png', // 标记图标路径
				width: 30, // 标记宽度
				height: 30, // 标记高度
			  },
			];
		  } else {
			console.error('获取位置失败，使用初始位置');
			uni.showToast({
			  title: '获取位置失败，使用初始位置',
			  icon: 'none',
			});
		  }
		},
		(error) => {
		  console.error('获取位置失败', error);
		  uni.showToast({
			title: '获取位置失败，使用初始位置',
			icon: 'none',
		  });
		}
	  );
	} else {
	  console.error('百度地图API未正确加载，使用初始位置');
	  uni.showToast({
		title: '百度地图API未正确加载',
		icon: 'none',
	  });
	}
  };
  
  // 标记点击事件
  const mapTap = (e) => {
	const markerId = e.detail.markerId;
	const marker = state.markers.find((item) => item.id === markerId);
	if (marker) {
	  // 移动地图到标记位置
	  const mapCtx = wx.createMapContext('map'); // 使用微信小程序的 API
	  mapCtx.moveToLocation({
		success: () => {
		  console.log('移动到标记位置成功');
		},
		fail: () => {
		  console.error('移动到标记位置失败');
		},
	  });
	}
  };
  
  onMounted(() => {
	getBaiduLocation();
  });
  </script>
  
  <style lang="scss" scoped>
  .container {
	position: relative;
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
  }
  
  .map {
	height: 90%;
	width: 100%;
  }
  
  .bottom {
	flex: 1;
	width: 100%;
  }
  
  .bottom-stats {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100px;
	background: linear-gradient(to top, rgba(0, 150, 136, 0.9), transparent);
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 10px;
	z-index: 10;
  }
  
  .steps-card,
  .trajectory-card,
  .gait-card {
	background-color: white;
	border-radius: 8px;
	padding: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .steps-count {
	font-size: 24px;
	font-weight: bold;
	color: #ff5722;
  }
  
  .trajectory-progress {
	height: 10px;
	background-color: #e0e0e0;
	border-radius: 5px;
	overflow: hidden;
	margin-top: 5px;
  }
  
  .progress-bar {
	height: 100%;
	background-color: #2196f3;
  }
  
  .gait-status {
	font-weight: bold;
	color: #2196f3;
  }
  </style>